<template>
    <div class="zw-detail-frame">
        <div class="zw-detail-frame-header">
            {{ props.title }}
        </div>
        <div class="zw-detail-frame-form">
            <el-scrollbar :max-hight="scrollHeight">
                <slot></slot>
            </el-scrollbar>
        </div>
        <div class="zw-detail-frame-buttons">
            <slot name="buttons"></slot>
            <el-button @click="closePage">关闭</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import ElConfirm from '../ElConfirm';

const props = withDefaults(defineProps<{
    title: string
}>(), {
    title: "",
})
const scrollHeight = computed(() => {
    return window.innerHeight - 64 - 48 - 24; // 高度-头-底部-padding*2
});
const closePage = () => {
    ElConfirm("确定要关闭页面吗？").then(() => {
        window.close();
    }).catch();
}
</script>
<style lang="scss" scope>
.zw-detail-frame {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    &-header {
        height: 64px;
        line-height: 64px;
        text-align: center;
        font-size: 24px;
        color: #fff;
        font-weight: 600;
        background-image: url("@/assets/headerbg.png");
        background-size: cover;
        background-repeat: no-repeat;
    }

    &-form {
        flex: 1;
        overflow: hidden;
        padding: 12px 20%;
    }

    &-buttons {
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

}
</style>